<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-25 18:21:33
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-29 15:11:31
 * @FilePath: \shangyitong\src\components\visitor\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 就诊人组件 -->
<template>
	<div class="visitor">
		<div class="top">
			<div class="left">
				<span class="free">{{
					$props.visitor.isInsure == 1 ? '医保' : '自费'
				}}</span>
				<span class="username"> {{ $props.visitor.name }}</span>
			</div>
			<div class="right">
				<el-button
					circle
					type="primary"
					size="default"
					:icon="Edit"
					@click="handeler"
				></el-button>
				<el-popconfirm
					class="box-item"
					width="180px"
					:title="`确定要删除${$props.visitor.name}么?`"
					placement="top"
					@confirm="confirm"
					@cancel="onCancel"
				>
					<template #reference>
						<el-button
							circle
							type="danger"
							size="default"
							:icon="Delete"
							v-if="isDeleteBtn"
						></el-button>
					</template>
				</el-popconfirm>
			</div>
		</div>
		<div class="bottom">
			<p>
				证件类型:{{
					$props.visitor.param.certificatesTypeString || '暂无'
				}}
			</p>
			<p>证件号码:{{ $props.visitor.certificatesNo }}</p>
			<p>用户性别:{{ $props.visitor.sex == 0 ? '女' : '男' }}</p>
			<p>出生日期:{{ $props.visitor.birthdate || '暂无' }}</p>
			<p>手机号码:{{ $props.visitor.phone || '暂无' }}</p>
			<p>婚姻状况:{{ $props.visitor.isMarry == 0 ? '未婚' : '已婚' }}</p>
			<p>当前住址:{{ $props.visitor.address || '暂无住址' }}</p>
			<p>详细住址:{{ $props.visitor.param.fullAddress || '暂无地址' }}</p>
			<!--红色的已选择的盒子 -->
			<transition name="confirm">
				<div
					class="confirm"
					v-if="$props.index === $props.currentIndex"
				>
					已选择
				</div>
			</transition>
		</div>
	</div>
</template>

<script setup lang="ts">
import { Edit, Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
let $route = useRoute()
let $router = useRouter()
let $emit = defineEmits(['changScene', 'remove'])
let $props = defineProps({
	visitor: {
		type: Object,
		default: () => {
			return {}
		},
		required: true,
	},
	index: {
		type: Number,
		default: () => {
			return 0
		},
	},
	currentIndex: {
		type: Number,
		default: () => {
			return -1
		},
	},
	isDeleteBtn: {
		type: Boolean,
		default: false,
	},
})
//编辑按钮事件回调
const handeler = () => {
	//情况1,就诊人管理模块点击编辑按钮
	//情况2,预约挂号组件点击就诊人按钮
	if ($route.path == '/hospital/register_step2') {
		$router.push({
			path: '/user/patient',
			query: {
				type: 'edit',
				id: $props.visitor.id,
			},
		})
	} else {
		$emit('changScene', $props.visitor)
	}
}
const confirm = () => {
	console.log('first')
	$emit('remove', $props.visitor)
}
const onCancel = () => {
	ElMessage({
		type: 'warning',
		message: '取消删除操作',
	})
}
</script>

<style lang="scss" scoped>
.visitor {
	box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	.top {
		height: 60px;
		background-color: #e5e5e5;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 10px;
		.left {
			margin: 0 0 0 10px;
			.free {
				background-color: white;
				padding: 6px;
				border-radius: 8px;
				font-size: 12px;
			}
			.username {
				font-weight: 900;
				margin: 0 0 0 10px;
			}
		}
		.right {
			margin: 0 10px 0 0;
		}
	}
	.bottom {
		padding: 15px;
		position: relative;
		p {
			line-height: 35px;
		}
		.confirm {
			position: absolute;
			left: 20%;
			top: 20%;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			color: red;
			border: 1px dashed red;
			text-align: center;
			line-height: 200px;
			opacity: 0.5;
			font-size: 30px;
			font-weight: 900;
			transform: rotate(30deg);
		}
		.confirm-enter-from {
			transform: scale(1);
		}
		.confirm-enter-active {
			transition: all 0.3s;
		}
		.confirm-enter-to {
			transform: scale(1.2);
		}
	}
}
</style>
